<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="计划名称">
          <el-input v-model="queryParams.planName" style="width: 150px" clearable size="small"></el-input>
      </el-form-item>
      
      
      
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleEdit"
        >新增计划</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="configList" row-key="id">
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column label="计划名称" align="center" width="250" prop="planName" :show-overflow-tooltip="true"/>
      <el-table-column label="计划分类" align="center" prop="planClassify" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
              <el-tag v-if="scope.row.planClassify=='1'" type="success">北大青鸟</el-tag>
              <el-tag v-else >技工学校</el-tag>
          </template>
      </el-table-column>
      <el-table-column label="计划类型" align="center" width="150" prop="planType" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
              <el-tag v-if="scope.row.planType=='1'" >年度咨询计划</el-tag>
              <el-tag v-if="scope.row.planType=='2'" >月度咨询计划</el-tag>
              <el-tag v-if="scope.row.planType=='3'" >年度报名计划</el-tag>
              <el-tag v-if="scope.row.planType=='4'" >月度报名计划</el-tag>
          </template>
      </el-table-column>
      
      <el-table-column label="计划周期" align="center" prop="planCycle" >
      </el-table-column>
      <el-table-column label="咨询计划数量" align="center" prop="consultPlanNumbers" >
      </el-table-column>
      <el-table-column label="报名计划数量" align="center" prop="enrollPlanNumbers" >
      </el-table-column>
      <el-table-column label="修改时间" align="center" width="150" prop="modifyTime" :show-overflow-tooltip="true">
          <template slot-scope="scope">
              {{parseTime(scope.row.modifyTime)}}
          </template>
      </el-table-column>
      <el-table-column label="计划描述" align="center" width="250" prop="planDesc" :show-overflow-tooltip="true"/>
      <el-table-column label="操作" align="center" width="180" fixed="right">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <el-button
                          size="mini"
                          circle type="success"
                          icon="el-icon-edit"
                          @click="handleUpdate(scope.row)"
                  />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="添加月度计划" placement="top">
                  <el-button
                          size="mini"
                          circle type="primary"
                          icon="el-icon-plus"
                          v-if="scope.row.pid==0"
                          @click="handleEdit(scope.row,true)"
                  />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="复制月计划" placement="top">
                  <el-button
                          size="mini"
                          circle type="primary"
                          icon="el-icon-document-copy"
                          v-if="scope.row.pid!=0"
                          @click="copyPlan(scope.row)"
                  />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-button
                          size="mini"
                          circle type="danger"
                          icon="el-icon-delete"
                          @click="handleDelete(scope.row)"
                  />
                </el-tooltip>
                
              </template>
      </el-table-column>
      
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!--编辑计划-->
    <el-dialog title="计划编辑" :visible.sync="editPlanVisible" width="60%" :before-close="handleClose">
        <el-form :model="formData" ref="formData" label-width="110px"  :rules="rules">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="计划分类" prop="planClassify">
                        <el-radio-group v-model="formData.planClassify" @change="selectRadio">
                            <el-radio  label="1">北大青鸟</el-radio>
                            <el-radio  label="2">技工学校</el-radio>

                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="计划周期" prop="planCycle">
                        <el-date-picker v-if="formData.planType%2==0"
                            v-model="formData.planCycle"
                            type="month"
                            clearable
                            value-format="yyyy-MM"
                            placeholder="选择月">
                        </el-date-picker>
                        <el-date-picker v-else
                            type="year"
                            v-model="formData.planCycle"
                            clearable
                            value-format="yyyy"
                            placeholder="选择年">
                        </el-date-picker>
                        
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col >
                    <el-form-item label="计划名称" prop="planName">
                        <el-input v-model="formData.planName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="咨询计划数量" prop="consultPlanNumbers">
                        <el-input v-model="formData.consultPlanNumbers"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="报名计划数量" prop="enrollPlanNumbers">
                        <el-input v-model="formData.enrollPlanNumbers"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="计划描述">
                <el-input v-model="formData.planDesc" type="textarea" :rows="2"  ></el-input>
            </el-form-item>
            <el-form-item label="计划类型" prop="planType">
                <el-radio-group v-model="formData.planType" @change="selectRadio">
                    <el-radio  label="1" v-if="!isAddMonthPlan">年度计划</el-radio>
                    <el-radio  label="2">月度计划</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="上级年度计划" v-if="formData.planType=='2' || formData.planType=='4'" prop="pid">
                <el-select v-model="formData.pid" placeholder="请选择">
                    <el-option v-for="item in parentList" :key="item.id" :label="item.planName" :value="item.id"></el-option>
                </el-select> 
                <el-button type="primary" plain @click="addPersons">添加计划人员</el-button>
            </el-form-item>
            <el-row v-for="(item,index) in formData.personList" :key="index">
                <el-col :span="8">
                    <el-form-item :label="'计划人员'+(index+1)" prop="planNumbers">
                        <el-select v-model="item.planUserId" placeholder="计划执行人">
                            <el-option v-for="user in userList" :label="user.username" :value="user.id" :key="user.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item :label="'咨询计划数量'+(index+1)" prop="planNumbers">
                        <el-input v-model="item.planNumbers" placeholder="数量" style="padding-left: 10px;" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item :label="'报名计划数量'+(index+1)" prop="planNumbers">
                        <el-input v-model="item.planEnrollNumbers" placeholder="数量" style="padding-left: 10px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4" style="padding-left: 10px;">
                    <el-button type="danger" icon="el-icon-delete" @click="decreasePerson(index)" plain></el-button>
                </el-col>
            </el-row>
            
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitPlan">确 定</el-button>
            <el-button @click="handleClose">取 消</el-button>
        </div>
    </el-dialog>
    
  </div>
</template>

<script>
import { getPlanInfoPageList,addOrupdatePlanInfo,getParentPlanList,deletePlanInfo,getPersonListByPlanId } from "@/api/studentInfo/plan";
import {getSysUserList} from "@/api/workflow/conferenCeroom"

export default {
  name: "Config",
  data() {
    return {
      // 遮罩层
      loading: true,
      editPlanVisible:false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 参数表格数据
      configList: [],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        paramName: undefined,
        paramKey: undefined,
        paramType: undefined
      },
      isAddMonthPlan:false,
      consultMajorList:[],
      formData:{
          personList:[],
          planName:null,
          planNumbers:null,
          planDesc:null,
          pid:null,

      },
      rules:{
          planName:[{ required: true, message: "请填写计划名称", trigger: "blur" }],
          planType:[{ required: true, message: "请选择计划类型", trigger: "blur" }],
          consultPlanNumbers:[{ required: true, message: "请填写咨询计划数量", trigger: "blur" }],
          enrollPlanNumbers:[{ required: true, message: "请填写报名计划数量", trigger: "blur" }],
          pid:[{ required: true, message: "请选择年度计划", trigger: "blur" }],
          planClassify:[{ required: true, message: "请选择计划分类", trigger: "blur" }],
          planCycle:[{ required: true, message: "请选择计划周期", trigger: "blur" }]
      },
      userList:[],
      parentList:[],
      isYear:false
      
    };
  },
  created() {
    this.getList();
    this.getUserList()
    //咨询专业
    this.getDicts("consult_major").then(response => {
      this.consultMajorList = response.data;
    });
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      getPlanInfoPageList(this.queryParams).then(response => {
          this.configList = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getLable(list,id){
      for(let i=0;i<list.length;i++){
        if(list[i].dictValue==id){
          return list[i].dictLabel
        }
      }
    },
    handleEdit(row,addchild){
        //弹出窗口
        this.editPlanVisible = true
        this.resetFormData()
        if(row.id){
            this.isAddMonthPlan = true
            if(row.planType=='1'){
                this.formData.planType = '2'

            }
            if(row.planType=='3'){
                this.formData.planType = '4'
            }
            this.formData.planClassify=row.planClassify
            this.selectRadio(this.formData.planType)
            this.getParentList()
            if(addchild==true){
                this.formData.pid=row.id
            }
            
        }else{
            this.isAddMonthPlan = false
        }
        
        
    },
    handleClose(){
        //关闭窗口
        this.editPlanVisible = false
    },
    addPersons(){
        //添加计划人员
        const personJson = {planUserId:undefined,planNumbers:undefined,planEnrollNumbers:undefined}
        this.formData.personList.push(personJson)
    },
    decreasePerson(index){
        //删除人员
        this.formData.personList.splice(index,1)
    },
    submitPlan(){
        //提交计划    
        this.$refs["formData"].validate(valid => {
            if (valid) {
                addOrupdatePlanInfo(this.formData).then(resp=>{
                    if(resp.code==200){
                        this.msgSuccess("提交成功");
                        this.handleClose()
                        this.handleQuery()
                    }
                })
            }
        })
    },
    getUserList(row){
      console.log(row)
      getSysUserList({roleId:10}).then(resp=>{
        this.userList = resp.data
      })
    },
    selectRadio(val){
        console.log(val)
        if(val%2==0){
            
            this.getParentList()
        }else{
            this.formData.planPersons=[]
            this.parentList=[]
        }
    },
    getParentList(pidVal){
        getParentPlanList({pid:0}).then(resp=>{
            this.parentList = resp.data
        })
    },
    handleUpdate(row){
        
        //修改
        if(row.pid==0){
            this.isAddMonthPlan = false
        }else{
            this.isAddMonthPlan = true
        }
        
        this.editPlanVisible = true
        this.getParentList()
        this.formData={
          personList:[],
          planName:row.planName,
          consultPlanNumbers:row.consultPlanNumbers,
          enrollPlanNumbers: row.enrollPlanNumbers,
          planDesc:row.planDesc,
          pid:row.pid,
          planType:row.planType,
          id:row.id,
          planClassify:row.planClassify,
          planCycle:row.planCycle
        }
        //this.formData.pid=1
        if(row.pid!=null && row.pid!=0){
            this.formData.pid = row.pid
        }
        this.getPersonList(row.id)
        
    },
    copyPlan(row){
        this.formData={
          personList:[],
          planName:row.planName+'-复制',
          planNumbers:row.planNumbers,
          planDesc:row.planDesc,
          pid:row.pid,
          planType:row.planType,
          planClassify:row.planClassify,
          planCycle:row.planCycle
        }
        if(row.pid!=null && row.pid!=0){
            this.formData.pid = row.pid
        }
        const _this = this
        this.getPersonList(row.id,function(){
           addOrupdatePlanInfo(_this.formData).then(resp=>{
                if(resp.code==200){
                    _this.msgSuccess("复制成功");
                    _this.handleQuery()
                }
            })
        })
    },
    getPersonList(id,callback){
        getPersonListByPlanId({planId:id}).then(resp=>{
            this.formData.personList = resp.data
            callback()
        })
    },
    handleDelete(row){
        //删除
        const _this = this
         this.$confirm('是否确认删除吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
            deletePlanInfo({id:row.id}).then(resp=>{
            if(resp.code==200){
                _this.msgSuccess("删除成功");
                _this.handleQuery()
            }
        })
        })
        
    },
    resetFormData(){
        this.formData={
          personList:[],
          planName:null,
          planNumbers:null,
          planDesc:null,
          pid:null,
        }
    }
  }
};
</script>
